<template>
    <div class="body member">
        <div class="memli" v-if="mystatus">
            <div class="membox">
                <h1>微金网会员</h1>
                <h2>6项专属特权+专属社群经纪人</h2>
                <h3>终身 <span>￥1800</span></h3>
                <!--<div>立即开通</div>-->
            </div>
            <p>会员VIP特权</p>
            <ul class="member_tq">
                <li @click="propo(0)">
                    <div>
                        <img src="../img/m_icon1.png" alt="">
                        <span></span>
                    </div>
                    <p>办卡返佣</p>
                </li>
                <li @click="propo(1)">
                    <div>
                        <img src="../img/m_icon2.png" alt="">
                        <span></span>
                    </div>
                    <p>贷款推广</p>
                </li>
                <li style="width: 18%;" @click="propo(2)">
                    <div>
                        <img src="../img/m_icon3.png" alt="">
                        <span></span>
                    </div>
                    <p>微金商学院</p>
                </li>
                <li @click="propo(3)">
                    <div>
                        <img src="../img/m_icon4.png" alt="">
                        <span></span>
                    </div>
                    <p>权证服务</p>
                </li>
                <li @click="propo(4)">
                    <div>
                        <img src="../img/m_icon5.png" alt="">
                        <span></span>
                    </div>
                    <p>技术指导</p>
                </li>
                <li @click="propo(5)">
                    <div>
                        <img src="../img/m_icon6.png" alt="">
                        <span></span>
                    </div>
                    <p>免费服务</p>
                </li>
            </ul>
        </div>
        <div class="memli" v-if="!mystatus">
            <div class="membox">
                <h1>微金网经纪人</h1>
                <h2>5项专属特权+专属社群纪人</h2>
                <h3>终身 <span>￥198</span></h3>
                <!--<div>立即开通</div>-->
            </div>
            <p>经纪人VIP特权</p>
            <ul class="member_tq">
                <li @click="propo(6)">
                    <div>
                        <img src="../img/m_icon1.png" alt="">
                        <span></span>
                    </div>
                    <p>办卡返佣</p>
                </li>
                <li @click="propo(7)">
                    <div>
                        <img src="../img/m_icon2.png" alt="">
                        <span></span>
                    </div>
                    <p>贷款推广</p>
                </li>
                <li style="width: 18%;" @click="propo(8)">
                    <div>
                        <img src="../img/m_icon3.png" alt="">
                        <span></span>
                    </div>
                    <p>微金商学院</p>
                </li>
                <li @click="propo(9)">
                    <div>
                        <img src="../img/m_icon4.png" alt="">
                        <span></span>
                    </div>
                    <p>权证服务</p>
                </li>
                <li @click="propo(10)">
                    <div>
                        <img src="../img/m_icon5.png" alt="">
                        <span></span>
                    </div>
                    <p>技术指导</p>
                </li>
                <li>
                    <div>
                        <img src="../img/m_icon6.png" alt="">
                        <span class="gray"></span>
                    </div>
                    <p>免费服务</p>
                </li>
            </ul>
        </div>

        <!--皇冠系列-->
        <div class="huanguan" v-if="mystatus">
            <h1>成为</h1>
            <h2>微金网会员</h2>
            <div>有效期:终身</div>
            <h3>￥<span>1800</span>/年</h3>
        </div>
        <div class="huanguan" v-if="!mystatus">
            <h1>成为</h1>
            <h2>微金网经纪人</h2>
            <div>有效期:终身</div>
            <h3>￥<span>198</span>/年</h3>
        </div>
        <!--选择分销商-->
        <div class="fenxiaosa">
            <p>选择分销商</p>
            <input type="text" readonly="readonly" @click="popupVisible = !popupVisible" v-model="fenxiaoshaong" placeholder="选择您所属的分销商"/>
        </div>
        <!--支付方式选择-->
        <div class="fenxiaosa" style="margin-top: 0.2rem;">
            <p>支付方式</p>
            <div>
                <img src="../img/weixinpay.png" alt="">
                <span>微信支付</span>
            </div>
        </div>

        <!--lijizihfu-->
        <div class="lizhifu" @click="gotopay()"  v-if="mystatus">
            <span>充值金额<i>￥1800</i></span>
            <div>立即支付</div>
        </div>
        <div class="lizhifu" @click="gotopay()"  v-if="!mystatus">
            <span>充值金额<i>198</i></span>
            <div>立即支付</div>
        </div>
        <div style="height: 1rem;"></div>

        <!--选择分校少那个-->
        <mt-popup v-model="popupVisible" position="bottom">
            <mt-picker :slots="slots" @change="onValuesChange" style="width: 7.5rem;" showToolbar>
                            
                <div class="picker-toolbar-title">
                                  
                    <div class="usi-btn-cancel" @click="popupVisible = !popupVisible">取消</div>
                                  
                    <div class="">请选择分销商</div>
                                  
                    <div class="usi-btn-sure" @click="popupVisible = !popupVisible">确定</div>
                                
                </div>
                         
            </mt-picker>
        </mt-popup>

        <div class="propo" v-if="ifpropo">
            <div class="close" @click="ifpropo=!ifpropo">×</div>
            <div class="top">{{prodata.title}}</div>
            <div class="botto">{{prodata.content}}</div>
        </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';
    import wx from 'weixin-js-sdk';
    export default {
        name: "member",
        data() {
            return {
                mystatus: 1,
                popupVisible: false,
                ifpropo:false,
                prodata:{
                    title:"",
                    content:""
                },
                popList:[
                    {
                        title:"办卡返佣",
                        content:"微金网平台与多家大型银行进行了深入对接与合作，现有近百种信用卡产品已经正式上线。微金网会员可以从平台推广各大商业银行信用卡的申请与办理。每推荐下卡成功一张信用卡，微金会员都将获得相应卡种的返佣奖励。  微金网平台为每个会员提供独立的后台和专属的会员信用卡二维码。此二维码可以通过各种渠道（如朋友圈、个人网站）进行推广。"
                    },
                    {
                        title:"贷款推广",
                        content:"微金网平台与多家商业银行及金融机构进行商务对接与深入合作，目前有多种形式的线上贷款产品在平台推出。微金网会员有权通过平台进行线上贷款产品的推广和办理。成功下款后，微金网平台会根据贷款金额及返佣比例为会员提供相应的现金奖励。微金网平台为每个会员提供独立的后台和专属的会员贷款二维码。此二维码可以通过各种渠道（如朋友圈、个人网站）进行推广。"
                    },
                    {
                        title:"微金商学院",
                        content:"微金网平台具备雄厚的培训师资力量，目前拥有多位金融培训讲师，电商培训师，线上贷款培训师及微金企业文化讲师。每位老师都具有常年的金融实战经验和深厚的金融理论储备。平台会定期组织开展高端业务培训，金融产品首发宣讲，同业交流探讨沙龙。为微金会员适时加油充电。"
                    },
                    {
                        title:"权证服务",
                        content:"微金网平台为帮助会员提高业务办理效率与办理能力，特提供专业的一对一权证服务。微金网权证总部包括机构房抵、线上贷款、信用贷款、银行对接、信用卡申办五大子部门。充足的专业权证人员可以确保和会员直接对接。权证部门保障会员受理业务准确地同时，也满足了会员所属客户的时时需求。"
                    },
                    {
                        title:"技术指导",
                        content:"微金网平台为会员传授线上贷款的教学、技巧和实操。保证将最新、最全的线上贷款知识和实际应用全部教授给微金会员。平台在此还将提供免费现场服务，会员所属的线上贷款客户可以直接推送到微金直营店，由专业的线上贷款人员面对面为客户提供服务。"
                    },
                    {
                        title:"免费服务",
                        content:"微金网平台为会员提供专享的金融免费权益，微金会员在全国所有微金直营店办理线上信用卡及贷款业务时，将免去所有服务费用。此免费权益微金会员终身享受。"
                    },
                    {
                        title:"办卡返佣",
                        content:"微金网平台与多家大型银行进行了深入对接与合作，现有近百种信用卡产品已经正式上线。微金网经纪人可以从平台推广各大商业银行信用卡的申请与办理。每推荐下卡成功一张信用卡，微金经纪人都将获得相应卡种的返佣奖励。  微金网平台为每个经纪人提供独立的后台和专属的经纪人信用卡二维码。此二维码可以通过各种渠道（如朋友圈、个人网站）进行推广。"
                    },
                    {
                        title:"贷款推广",
                        content:"微金网平台与多家商业银行及金融机构进行商务对接与深入合作，目前有多种形式的线上贷款产品在平台推出。微金网经纪人有权通过平台进行线上贷款产品的推广和办理。成功下款后，微金网平台会根据贷款金额及返佣比例为经纪人提供相应的现金奖励。微金网平台为每个经纪人提供独立的后台和专属的经纪人贷款二维码。此二维码可以通过各种渠道（如朋友圈、个人网站）进行推广。"
                    },
                    {
                        title:"微金商学院",
                        content:"微金网平台具备雄厚的培训师资力量，目前拥有多位金融培训讲师，电商培训师，线上贷款培训师及微金企业文化讲师。每位老师都具有常年的金融实战经验和深厚的金融理论储备。平台会定期组织开展高端业务培训，金融产品首发宣讲，同业交流探讨沙龙。为微金经纪人适时加油充电。"
                    },
                    {
                        title:"权证服务",
                        content:"微金网平台为帮助经纪人提高业务办理效率与办理能力，特提供专业的一对一权证服务。微金网权证总部包括机构房抵、线上贷款、信用贷款、银行对接、信用卡申办五大子部门。充足的专业权证人员可以确保和经纪人直接对接。权证部门保障经纪人受理业务准确地同时，也满足了经纪人所属客户的时时需求。"
                    },
                    {
                        title:"技术指导",
                        content:"微金网平台为经纪人传授线上贷款的教学、技巧和实操。保证将最新、最全的线上贷款知识和实际应用全部教授给微金经纪人。平台在此还将提供免费现场服务，经纪人所属的线上贷款客户可以直接推送到微金直营店，由专业的线上贷款人员面对面为客户提供服务。"
                    }
                ],
                fenxiaoshaong:"",
                slots: [{
                    values: ["请选择"]
                }],
                fxslist:[],
                fxsid:""
            }
        },
        created() {
        },
        mounted() {
            if (this.$route.query.selected == "2") {
                this.mystatus = true;
            } else {
                this.mystatus = false;
            }
            this.getFenxiaoshan();
            document.querySelector('html').setAttribute('style', 'overflow:auto');
            document.querySelector('body').setAttribute('style', 'overflow:auto');
            document.querySelector('#app').setAttribute('style', 'overflow:auto');
        },
        methods: {
            propo(num){
                this.ifpropo = true;
                console.log(num);
                this.prodata = {
                    title:this.popList[num].title,
                    content:this.popList[num].content
                }
            },
            getFenxiaoshan(){
                this.slots[0].values =  ["请选择"];
                this.fxslist = [];
                this.axios({
                    method: 'get',
                    url: 'apis/listDistributor',
                    data: {},
                    headers: {'token':JSON.parse(localStorage.hhrdata).token},
                    withCredentials: true,
                }).then((response) => {
                    console.log(response)
                    if(response.data.code==-8){
                        //this.common.checkLogin(this);
                    }
                    response.data.data.forEach((item,i)=>{
                        this.slots[0].values.push(item.name);
                        this.fxslist.push(item)
                    });
                }).catch((error) => {
                    console.log(error);
                });
                console.log()
            },
            onValuesChange(picker,values) {
                if(values[0]=="请选择"){
                    this.fxsid = 0;
                }else{
                    this.fxslist.forEach((item,i)=>{
                        if(item.name == values[0]){
                            this.fxsid = item.id;
                        }
                    })
                }
                this.fenxiaoshaong = values[0];
            },
            gotopay(){
                let orderid =(new Date()).getTime();
                let mydid = this.fxsid;
                let distributorId = JSON.parse(localStorage.hhrdata).distributorId;
                if(distributorId){
                    mydid = distributorId;
                }
                this.axios({
                    method: 'post',
                    url: 'apis/pay?total='+this.$route.query.selected+'&voucherId='+orderid+'&did='+mydid,
                    data: {},
                    headers: {'token':JSON.parse(localStorage.hhrdata).token},
                    withCredentials: true,
                }).then((response) => {
                    console.log(response)
                    if(response.data.code==-8){
                        //this.common.checkLogin(this);
                    }
                    let that = this;
                    let param = response.data.param;
                    //console.log(typeof toString(param.timeStamp))

                    onBridgeReady();
                    function onBridgeReady(){
                        WeixinJSBridge.invoke(
                            'getBrandWCPayRequest', {
                                "appId":param.appId,     //公众号名称，由商户传入
                                "timeStamp":JSON.stringify(param.timeStamp),         //时间戳，自1970年以来的秒数
                                "nonceStr":param.nonceStr, //随机串
                                "package":param.package,
                                "signType":param.signType,         //微信签名方式：
                                "paySign":param.paySign //微信签名
                            },
                            function(res){
                                if(res.err_msg == "get_brand_wcpay_request:ok" ){
                                    // 使用以上方式判断前端返回,微信团队郑重提示：
                                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                    sessionStorage.removeItem("idrefresh");
                                    that.$router.push({path: '/paystatus', query: {selected: status}})
                                }
                            });
                    }
                    if (typeof WeixinJSBridge == "undefined"){
                        if( document.addEventListener ){
                            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                        }else if (document.attachEvent){
                            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                        }
                    }else{
                        onBridgeReady();
                    }
                }).catch((error) => {
                    console.log(error);
                });
            }
        }
    }
</script>

<style scoped lang="less">
    .member {
        background: #f4f4f4;

        .propo{
            width: 5.50rem;
            height: 5.8rem;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-top: -2.9rem;
            margin-left: -2.75rem;

            .top{
                width: 100%;
                height: 1.5rem;
                background: #b2d2ff;
                border-top-left-radius: 0.4rem;
                border-top-right-radius: 0.4rem;
                margin-top: 0.25rem;
                font-size: 0.7rem;
                color: #333;
                text-align: center;
                line-height: 1.5rem;
            }

            .close{
                width: 0.5rem;
                height: 0.5rem;
                text-align: center;
                line-height: 0.45rem;
                background: #fff;
                position: absolute;
                right: 0;
                top: 0;
                border-radius: 0.25rem;
                color: #333;
                font-size: 0.5rem;
                cursor: pointer;
            }

            .botto{
                background: #fff;
                padding: 0.3rem;
                line-height: 0.4rem;
                font-size: 0.25rem;
                color: #666;
                text-indent: 2em;

                border-bottom-left-radius: 0.4rem;
                border-bottom-right-radius: 0.4rem;
            }
        }

        .memli {
            margin: 0.3rem;

            .member_tq{
                height: 1.2rem;
                overflow: hidden;

                li{
                    float: left;
                    width: 15%;
                    height: 1.2rem;
                    margin: 0 0.03rem;
                    cursor: pointer;

                    div{
                        width: 0.64rem;
                        height: 0.64rem;
                        margin: 0 auto;
                        background: #ffe4b9;
                        border-radius: 0.32rem;
                        overflow: hidden;
                        position: relative;

                        img{
                            width: 0.44rem;
                            margin: 0.1rem auto;
                        }

                        .gray{
                            display: inline-block;
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            left: 0;
                            top: 0;
                            background: rgba(256,256,256,0.5);
                        }
                    }

                    p{
                        text-align: center;
                        font-size: 0.16rem;
                        color: #757575;
                        margin: 0.1rem auto;
                        font-weight: normal;
                    }
                }
            }

            .membox {
                width: 5.9rem;
                height: 3.69rem;
                background: url("../img/memback.png") center center no-repeat;
                background-size: 100% auto;
                padding: 0 0.5rem;
                overflow: hidden;
                position: relative;

                h1 {
                    height: 0.57rem;
                    font-size: 0.6rem;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                    line-height: 0.57rem;
                    text-shadow: 0px 6px 10px rgba(43, 43, 43, 0.27);
                    margin-top: 0.62rem;
                }

                h2 {
                    height: 0.22rem;
                    font-size: 0.22rem;
                    font-weight: 400;
                    color: rgba(255, 241, 219, 1);
                    line-height: 0.22rem;
                    margin-top: 0.3rem;
                }

                h3 {
                    font-size: 0.3rem;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                    line-height: 0.3rem;
                    margin-top: 1.2rem;

                    span {
                        font-size: 0.4rem;
                    }
                }

                div {
                    width: 2.22rem;
                    height: 0.6rem;
                    background: linear-gradient(90deg, rgba(255, 225, 179, 1) 0%, rgba(255, 242, 218, 1) 100%);
                    border-radius: 0.3rem;
                    text-align: center;
                    line-height: 0.6rem;
                    position: absolute;
                    right: 0.3rem;
                    bottom: 0.3rem;
                    cursor: pointer;
                }
            }

            p {
                font-size: 0.3rem;
                font-weight: 600;
                color: rgba(51, 51, 51, 1);
                line-height: 0.3rem;
                text-align: center;
                margin: 0.3rem auto;
            }

            img {
                width: 6.97rem;
                display: block;
            }
        }

        .huanguan {
            width: 7rem;
            height: 2.4rem;
            background: url("../img/huangguan.png") center center no-repeat;
            background-size: 100% auto;
            box-shadow: 0px 0px 15px 0px rgba(251, 182, 56, 0.48);
            border-radius: 0.2rem;
            margin: 0.25rem;
            position: relative;
            overflow: hidden;

            h1 {
                padding: 0 0.24rem;
                font-size: 0.3rem;
                margin-top: 0.2rem;
                font-weight: 400;
            }

            h2 {
                padding: 0 0.24rem;
                font-size: 0.7rem;
            }

            div {
                padding: 0 0.24rem;
                font-size: 0.24rem;
                color: rgba(51, 51, 51, 1);
                margin-top: 0.2rem;
            }

            h3 {
                position: absolute;
                bottom: 0.2rem;
                right: 0.2rem;

                span {
                    font-size: 0.6rem
                }
            }
        }

        .picker-toolbar-title{
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
        }
        .usi-btn-cancel,
        .usi-btn-sure{
            color: #3a84dc
        }

        .fenxiaosa{
            overflow: hidden;
            p{
                width:6.5rem;
                height:0.6rem;
                margin:  0 auto;
                font-size:0.26rem;
                font-weight: bold;
            }
            input{
                display: block;
                width:6.1rem;
                height:0.8rem;
                border:0.02rem solid rgba(224,224,224,1);
                border-radius:0.38rem;
                margin: 0 auto;
                color:rgba(51,51,51,1);
                line-height: 0.74rem;
                padding: 0 0.3rem;
            }
            div{
                display: block;
                width:6.1rem;
                height:0.8rem;
                border:0.02rem solid rgba(224,224,224,1);
                border-radius:0.38rem;
                margin: 0 auto;
                color:rgba(51,51,51,1);
                line-height: 0.74rem;
                padding: 0 0.3rem;
                background: #fff;
                img{
                    float: left;
                    width: 0.31rem;
                    height: 0.28rem;
                    margin: 0.26rem 0.2rem 0 0.1rem;
                }
            }
        }

        .lizhifu{
            height: 0.8rem;
            line-height: 0.8rem;
            background: #fff;
            margin: 0.5rem 0;
            padding: 0 0.5rem;
            cursor: pointer;
            i{
                font-size:0.4rem;
                color:rgba(251,66,67,1);
            }
            div{
                float: right;
                width:1.53rem;
                height:0.5rem;
                background:rgba(24,141,251,1);
                border-radius:0.23rem;
                line-height: 0.5rem;
                text-align: center;
                margin-top: 0.15rem;
                color: #fff;
            }
        }
    }
</style>
